Ext.Loader.setConfig( {
	enabled : true
});

Ext.require( [ '*' ]);

Ext.onReady(function() {
	// Define our data model
		var win = Ext.create('widget.window', {
			title : 'JANCODE新規作成',
			closable : true,
			closeAction : 'hide',
			width : 600,
			height : 180,
			layout : 'border',
			bodyStyle : 'padding: 5px;',
			items : Ext.create('Ext.form.Panel', {
				region : 'center',
				url : 'save-form.php',
				frame : true,
				bodyStyle : 'padding:5px 5px 0',
				width : 350,
				fieldDefaults : {
					msgTarget : 'side',
					labelWidth : 75
				},
				defaultType : 'textfield',
				defaults : {
					anchor : '100%'
				},

				items : [ {
					fieldLabel : 'カテゴリ',
					xtype : 'combo',
					name : 'first',
					allowBlank : false
				}, {
					fieldLabel : 'JANCODE',
					name : 'last'
				}, {
					fieldLabel : '商品名称',
					name : 'company'
				} ],

				buttons : [ {
					text : 'Save'
				}, {
					text : 'Cancel'
				} ]
			})
		});

		function showDetail(record) {
			var labelWidth=75;
			var detailHeaderPanel = Ext.create('Ext.form.Panel', {
				// region : 'north',
				height : 80,
				border : false,
				frame : true,
				defaults : {
					margin : '5 5 5 5',
				},
				items : [  {
					xtype : 'fieldcontainer',
					combineErrors : true,
					msgTarget : 'side',
					layout : 'hbox',
					items : [  {
						xtype : 'displayfield',
						value : 'JANCODE：',
						width:labelWidth
					}, {
						name : 'janCode',
						xtype : 'textfield',
						width : 150
// ,readOnly:true
// ,value:record.get('janCode')
					} ,{
						xtype : 'displayfield',
						value : '製品番号：',
						margin : '0 0 0 15',
						width:labelWidth
					}, {
						name : 'itemCode',
						xtype : 'textfield',
						width : 150
// ,readOnly:true
// ,value:record.get('categoryName')
					}]
				}]
// ,buttons : [ {
// text : 'Save'
// }, {
// text : 'Cancel'
// }
// ]
			});
			
			// create the Data Store
			var janCodeDetailStore = Ext.create('Ext.data.Store', {
				autoLoad : true,
				pageSize : 50,
				model : 'janCodeDetail',
				remoteSort : true,
				proxy : {
					type : 'ajax',
					url : 'getJanCodeDetail/',
					reader : {
						root : 'results',
						totalProperty : 'totalCount'
					},
					extraParams : {
						'janCode' : '1'
					}
				}
			});
			
			var detailGridPanelAri = Ext.create('Ext.grid.Panel', {
				// region : 'center',
				store : janCodeDetailStore,
				title : 'JANCD登録済み',
				columnLines : true,
				height : 200,
				columns : [ {
					header : 'JANCD',
					dataIndex : 'itemCode',
					width : 100
				}, {
					header : '商品名',
					dataIndex : 'itemStatus',
					flex : 1
				}, {
					header : '製品番号',
					dataIndex : 'nyukaDate',
					width : 100
				}],
				// region: 'center',
				// title: 'JANCODE管理',
				frame : true,
				// paging bar on the bottom
				bbar : Ext.create('Ext.PagingToolbar', {
					store : store,
					displayInfo : true,
					displayMsg : 'Displaying topics {0} - {1} of {2}',
					emptyMsg : "No topics to display"
					,items:[
						 {
						 text: '登録',
// pressed: pluginExpanded,
						 enableToggle: true,
						 toggleHandler: function(btn, pressed) {
						 var preview =
						 Ext.getCmp('gv').getPlugin('preview');
						 preview.toggleExpanded(pressed);
						 }
					 }]
				})
			});
			var detailGridPanelNasi = Ext.create('Ext.grid.Panel', {
				// region : 'center',
				store : janCodeDetailStore,
				title : 'JANCD未登録',
				columnLines : true,
				height : 200,
				columns : [ {
					header : 'JANCD',
					dataIndex : 'itemCode',
					width : 100
				}, {
					header : '商品名',
					dataIndex : 'itemStatus',
					flex : 1
				}, {
					header : '製品番号',
					dataIndex : 'nyukaDate',
					width : 100
				}],
				// region: 'center',
				// title: 'JANCODE管理',
				frame : true,
				// paging bar on the bottom
				bbar : Ext.create('Ext.PagingToolbar', {
					store : store,
					displayInfo : true,
					displayMsg : 'Displaying topics {0} - {1} of {2}',
					emptyMsg : "No topics to display"
				// items:[
						// '-', {
						// text: 'Show Preview',
						// pressed: pluginExpanded,
						// enableToggle: true,
						// toggleHandler: function(btn,
						// pressed) {
						// var preview =
						// Ext.getCmp('gv').getPlugin('preview');
						// preview.toggleExpanded(pressed);
						// }
						// }]
						})
			});

			var detailWin = Ext.create('widget.window', {
				title : '新規入庫',
				closable : true,
				closeAction : 'hide',
				width : 540,
				// height : 600,
				layout : 'auto',
				bodyStyle : 'padding: 5px;',
				items : [ detailHeaderPanel,detailGridPanelAri,detailGridPanelNasi ]
			});

			detailWin.show();
		}

		Ext.define('item', {
			extend : 'Ext.data.Model',
			fields : [ 'categoryName', 'janCode', 'itemCode', 'itemName',
					'itemStatus' ],
			idProperty : 'itemCode'
		});

		// create the Data Store
		var store = Ext.create('Ext.data.Store', {
			autoLoad : true,
			pageSize : 50,
			model : 'item',
			remoteSort : true,
			proxy : {
				type : 'ajax',
				url : 'getAllItemList/',
				reader : {
					root : 'results',
					totalProperty : 'totalCount'
				}
			}
		});

		// create the grid and specify what field you want
		// to use for the editor at each column.
		var grid = Ext.create('Ext.grid.Panel', {
			store : store,
			columnLines : true,
			height : 500,
			columns : [ {
				header : 'カテゴリ',
				dataIndex : 'categoryName',
				width : 150
			}, {
				header : 'JANCODE',
				dataIndex : 'janCode',
				width : 130
			},{
				header : '商品名',
				dataIndex : 'itemName',
				flex : 1
			}, {
				header : '製品番号',
				dataIndex : 'itemCode',
				width : 130
			}, {
				header : '入庫日時',
				dataIndex : 'nyukoTime',
				width : 90
			}, {
				header : '入庫者',
				dataIndex : 'nyukoUser',
				width : 90
			}
			// , {
			// header : '入荷日時',
			// dataIndex : 'itemCount',
			// width : 100
			// }, {
			// header : '注文番号',
			// dataIndex : 'itemCount',
			// width : 90
			// }, {
			// header : '出荷日時',
			// dataIndex : 'itemCount',
			// width : 100
			// }, {
			// header : '出荷番号',
			// dataIndex : 'itemCount',
			// width : 90
			// }
			],
			// region: 'center',
			// title: 'JANCODE管理',
			frame : true,
			tbar : [ {
				itemId : 'itemDetail',
				text : '新規入庫',
				iconCls : 'add',
				handler : function() {
					showDetail();
				}
// ,disabled : true
			} ],
			bbar : Ext.create('Ext.PagingToolbar', {
				store : store,
				displayInfo : true,
				displayMsg : 'Displaying topics {0} - {1} of {2}',
				emptyMsg : "No topics to display"
			// items:[
					// '-', {
					// text: 'Show Preview',
					// pressed: pluginExpanded,
					// enableToggle: true,
					// toggleHandler: function(btn, pressed) {
					// var preview = Ext.getCmp('gv').getPlugin('preview');
					// preview.toggleExpanded(pressed);
					// }
					// }]
					}),
			listeners : {
				'selectionchange' : function(view, records) {
					grid.down('#itemDetail').setDisabled(!records.length);
				}
// ,'itemdblclick' : function(view, record, item, index) {
// // alert(record.get('itemName'));
// showDetail(record);
// }
			}
		});

		var searchPanel = Ext.create('Ext.form.Panel', {
			// region: 'north',
			height : 80,
			border : false,
			frame : true,
			defaults : {
				margin : '15 5 5 5'
			},
			items : [ {
				xtype : 'fieldcontainer',
				combineErrors : true,
				msgTarget : 'side',
				layout : 'hbox',
				items : [ {
					xtype : 'displayfield',
					value : 'カテゴリ：'
				}, {
					name : 'hours',
					xtype : 'combo',
					width : 150
				}, {
					xtype : 'displayfield',
					value : 'JANCODE:',
					margin : '0 0 0 15'
				},

				{
					name : 'minutes',
					xtype : 'textfield',
					width : 150
				}, {
					xtype : 'displayfield',
					value : '製品番号:',
					margin : '0 0 0 15'
				},

				{
					name : 'minutes',
					xtype : 'textfield',
					width : 150
				}, {
					xtype : 'displayfield',
					value : '商品名:',
					margin : '0 0 0 15'
				},

				{
					name : 'minutes',
					xtype : 'textfield',
					width : 150
				} ]
			} ],
			buttons : [
					{
						text : '検索',
						handler : function() {
							var form = this.up('form').getForm(), s = '';
							if (form.isValid()) {
								Ext.iterate(form.getValues(), function(key,
										value) {
									s += Ext.util.Format.format(
											"{0} = {1}<br />", key, value);
								}, this);

								Ext.Msg.alert('Form Values', s);
							}
						}
					},

					{
						text : 'Reset',
						handler : function() {
							this.up('form').getForm().reset();
						}
					} ]
		});

		Ext.create('Ext.panel.Panel', {
			title : '倉庫管理＞入庫管理',
			layout : 'auto',
			items : [ searchPanel, grid ],
			// height : 500,
			renderTo : 'bodyarea'
		});

	});
